/* stylelint-disable order/properties-order */
<route lang="json5">
{
  style: {
    navigationBarTitleText: '登录',
  },
}
</route>

<template>
  <view class="container">
    <view class="wx-auth-container">
      <view class="box">
        <view class="logo-info">
          <text class="title">欢迎进入XXX</text>
        </view>
        <view class="small-tips">
          <view>为您提供优质服务,XXX需要获取以下信息</view>
          <view>您的公开信息（昵称、头像）</view>
        </view>
        <view class="btns">
          <button :disabled="logingFlag" @click="getUserProfile()" class="btn-auth">登录</button>
          <view @click="toBack" class="btn-callback">暂不登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { useBookStore } from '@/store/book'
import { loginApi } from '@/service/user'
import { myBookListApi } from '@/service/book'
import { getEnvBaseUrl } from '@/utils'

const logingFlag = ref(false)
const checked = ref(false)
const lightColor = '#ff6b35'

const toBack = () => {
  uni.navigateBack({ delta: 1 })
}

const userInfoRef = useUserStore()
const bookRef = useBookStore()

const getUserProfile = async () => {
  // 获取用户信息
  uni.showLoading({ title: '登录中...', mask: true })
  const loginRes = await wx.login()
  const loginVo = await loginApi(1, loginRes.code)
  // const avatarRes = await uni.downloadFile({
  //   url: baseUrl + '/file/download?type=1&param=3', //仅为示例，并非真实的资源
  //   // filePath: wx.env.USER_DATA_PATH + '/111.png',
  //   header: {
  //     Authorization: loginVo.data.token,
  //   },
  // })
  userInfoRef.setUserInfo({
    id: loginVo.data.id,
    token: loginVo.data.token,
    avatar: loginVo.data.avatar,
    nickname: loginVo.data.nickname,
    birthday: loginVo.data.birthday,
    city: loginVo.data.city,
    sex: loginVo.data.sex,
    phone: loginVo.data.phone,
  })

  const bookListRes = await myBookListApi({ page: 1, size: 10 })
  bookRef.bookList = bookListRes.data.records
  uni.hideLoading()
  uni.navigateBack()
}

let code = ''
onLoad(async () => {
  // #ifdef MP-WEIXIN
  const res = await wx.login()
  code = res.code
  // #endif
})
</script>

<style lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
.wx-auth-container {
  width: 100%;
  margin-top: 20%;
  background: #fff;
}
.box {
  margin: 0 32rpx;
}
.logo-info {
  display: flex;
  flex-direction: row;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20rpx;
  font-weight: bold;
}
.small-tips {
  width: 94%;
  padding: 20rpx;
  margin: 0 0 20rpx;
  font-size: 24rpx;
  color: #999;
}
.btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 100rpx;
}

.btn-auth {
  width: 92%;
  margin: 0 auto 40rpx;
  color: #fff;
  background: #ff6b35;
  border-radius: 100px;
  -webkit-animation: mymove 5s infinite;
  animation: mymove 5s infinite; /*Safari and Chrome*/
  /* Safari 和 Chrome */
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; /*动画的速度曲线*/ /*动画的速度曲线*/
  animation-direction: alternate; /*轮流反向播放动画。*/
  /* stylelint-disable-next-line order/properties-order */
  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
}

.title {
  font-size: 48rpx;
  color: #000;
  text-align: center;
}
.privacy {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 360rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}
.flex {
  display: flex;
}
.light-color {
  color: #ff6b35;
}
.btn-callback {
  width: 92%;
  height: 90rpx;
  margin: 0 auto;
  font-size: 30rpx;
  line-height: 90rpx;
  text-align: center;
  background: #ededed;
  border-radius: 100px;
}
</style>
